<template>
  <header-nav />
  <manager-hearder />
  <div class="table">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="ID" prop="id" width="50" />
      <el-table-column label="英语" prop="enWord" width="120" />
      <el-table-column label="中文" prop="zhWord" width="120" />
      <el-table-column label="英语(全)" prop="enFullWord" />
      <el-table-column label="类型" prop="type" />
      <el-table-column label="创建时间" prop="createDate" />
      <el-table-column label="修改时间" prop="updateDate" />
      <el-table-column fixed="right" label="操作" width="50">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="dialogFormVisible" title="字典">
    <el-form :model="form">
      <el-form-item label="英语" label-width="140px">
        <el-input v-model="form.enWord" />
      </el-form-item>
      <el-form-item label="中文" label-width="140px">
        <el-input v-model="form.zhWord" />
      </el-form-item>
      <el-form-item label="英语(全)" label-width="140px">
        <el-input v-model="form.enFullWord" />
      </el-form-item>
      <el-form-item label="类型" label-width="140px">
        <el-input v-model="form.type" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { manager } from '@/api/manager'
import HeaderNav from '@/components/common/HeaderNav.vue'
import ManagerHearder from '@/components/manager/ManagerHearder.vue'
import { onMounted, reactive, ref } from 'vue'

const tableData = ref([])
const current = ref(1)
const size = ref(10)
const total = ref(0)
const currentId = ref(0)
const dialogFormVisible = ref(false)

const form = reactive({
  enWord: '',
  zhWord: '',
  enFullWord: '',
  type: ''
})

const eidt = async () => {
  const id = currentId.value
  const { enWord, zhWord, enFullWord, type } = form
  const res = id
    ? await manager.hotnew.edit({
      id,
      enWord,
      zhWord,
      enFullWord,
      type
    })
    : await manager.hotnew.add({
      enWord,
      zhWord,
      enFullWord,
      type
    })
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  } else {
    window.location.href = '/'
  }
}

const getList = async () => {
  const res = await manager.hotnew.getList({
    current: current.value,
    size: size.value
  })
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  } else {
    window.location.href = '/'
  }
}

const handleConfirm = () => {
  eidt()
}

const handleCurrentChange = (val: number) => {
  current.value = val
  getList()
}
const handleEdit = (index: number, row: any) => {
  currentId.value = row.id
  dialogFormVisible.value = true
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.table {
  width: 850px;
  margin: 20px auto;

  .el-pagination {
    margin: 10px auto 5px;
  }
}
</style>
